<template>
  <div>
    <!-- 
      v-else 和v-if互斥
      if () {

      } else {

      } 
    -->
    <h1 v-if="isLogin">尊金的会员用户，欢迎归来</h1>
    <h1 v-else>请先登录</h1>
    <button @click="isLogin = !isLogin">切换登录</button>
    <!-- 
      v-else-if 控制分支
      定义分数
      分数>=80 优秀
      分数>=70 良好
      分数>=60 及格
      其他的  不及格
      if (score >= 80) {

      } else if (score >= 70) {

      } ...

     -->
    <h2 v-if="score >= 80">优秀</h2>
    <!-- v-if v-else-if v-else 结构需要紧密写在一起 -->
    <!-- <div></div> -->
    <h2 v-else-if="score >= 70">良好</h2>
    <h2 v-else-if="score >= 60">及格</h2>
    <h2 v-else>不及格</h2>

    <!-- {{}} 不能用if 和 for 
      使用指令 v-if 解决
    -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 是否登录 登录就是true
      isLogin: true,
      score: 100,
    };
  },
};
</script>

<style>
</style>